Questions

3 of 50

1What is a pseudo-class in CSS?

2How are pseudo-classes different from pseudo-elements?

3What is the syntax of a pseudo-class in CSS?

4Give some commonly used pseudo-classes.

5What does the :hover pseudo-class do?

6What’s the purpose of the :active pseudo-class?

7How does the :visited pseudo-class work for links?

8What is the :focus pseudo-class used for?

9What does the :checked pseudo-class do?

10How does the :disabled pseudo-class behave?

11What is the difference between :first-child and :first-of-type?

12How do :nth-child() and :nth-of-type() differ?

13How do you select every odd or even element using pseudo-classes?

14How can you style an element when it’s being hovered over along with its child?

15What does the :not() pseudo-class do?

16How can you use multiple pseudo-classes together?

17What is the difference between :link and :visited?

18What does the :target pseudo-class represent?

19How can you use :empty to detect empty elements?

20How does the :root pseudo-class differ from the html selector?

21What does the :valid and :invalid pseudo-class do?

22How can you use :required and :optional pseudo-classes in forms?

23What is the use of :in-range and :out-of-range?

24What does :read-only and :read-write do?

25How can you style an input field when it’s autofilled?

26How does the :focus-within pseudo-class work?

27What’s the difference between :focus and :focus-visible?

28What is the purpose of the :placeholder-shown pseudo-class?

29How can you style a checkbox when it is checked or unchecked?

30How can you style invalid form inputs without JavaScript?

31Can pseudo-classes be chained together? Give an example.

32What is the specificity of pseudo-classes compared to normal selectors?

33How can you use :not() effectively to exclude elements from styling?

34How does :has() pseudo-class work, and why is it powerful?

35Is :has() supported in all browsers?

36How does :is() differ from :where() in terms of specificity?

37How can you combine :is() or :where() with other selectors for cleaner code?

38What’s the difference between :nth-child() and :nth-last-child()?

39How can you style only the last element of a list using pseudo-classes?

40What does the :lang() pseudo-class do?

41How do you change a button’s color when hovered but not when disabled?

42How can you highlight the current section in a menu using :target?

43How can you style a form field differently when focused and valid?

44How do you style every third list item differently?

45How can you style alternate table rows without adding extra classes?

46How do you hide empty <p> tags using pseudo-classes?

47How can you style the parent when any child inside it is focused?

48How can you highlight a link only when it’s both focused and hovered?

49How can you style the first letter of only the first paragraph using pseudo-classes?

50How would you use :has() to select a <div> that contains an image?

CSS

Text formatters

Pseudo elements

Transformation and Transition

Everything else

03 / 50

What is the syntax of a pseudo-class in CSS?

CSS Pseudo-Class Syntax

In CSS, a pseudo-class is written by appending a single colon : followed by the pseudo-class name to a selector. It targets elements based on their state, position, or relationship in the DOM.

Syntax Rules

1
Single colon : precedes the pseudo-class (e.g., :hover, :first-child).
2
Placed directly after the selector without any space (e.g., button:hover).
3
Can be combined with other selectors and pseudo-classes (e.g., ul li:first-child:hover).
4
Cannot create new elements; only applies styles conditionally to existing elements.

Example: Pseudo-Class Syntax

This example demonstrates the syntax of pseudo-classes to style elements dynamically based on hover, focus, and position in a list.

Best Practices

1
Use pseudo-classes to style dynamic states without extra HTML classes.
2
Combine pseudo-classes with pseudo-elements (::before, ::after) for richer styling.
3
Ensure that hover or focus styles do not convey essential information inaccessible to keyboard users.
4
Test pseudo-class behavior across browsers for consistency.